<template>
    <div class="behavior-alarm container">
        <el-form ref="searchForm" :model="searchForm" :inline="true">
            <el-form-item label="归属地" prop="deptId">
                <treeselect @input="searchListFn(true)" style="width: 240px;" v-model="searchForm.deptId"
                            :options="deptOptions" :show-count="true" :normalizer='normalizer' placeholder="请选择归属地"/>
            </el-form-item>
            <el-form-item label="告警地址" prop="deptId">
							<el-input
								v-model="searchForm.location"
								placeholder="请输入告警地址"
								clearable
								size="small"
								style="width: 240px"
								@keyup.enter.native="searchListFn(true)"
							/>
            </el-form-item>
            <el-form-item label="告警类型" prop="alarmType">
                <el-select
                        v-model="searchForm.alarmType"
                        placeholder="请选择告警类型"
                        clearable
                        size="small"
                        style="width: 240px"
                        @change="searchListFn(true)"
                >
                    <el-option
                            v-for="dict in [{value: 157, label: '未牵狗绳识别'}]"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="处理状态" prop="status">
                <el-select
                        v-model="searchForm.status"
                        placeholder="请选择处理状态"
                        clearable
                        size="small"
                        style="width: 240px"
                        @change="searchListFn(true)"
                >
                    <el-option
                            v-for="dict in [{value: 0, label: '未处理'}, {value: 1, label: '持续跟进'}, {value: 2, label: '已处理'}]"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                    />
                </el-select>
            </el-form-item>
						<el-form-item label="告警ID" prop="id">
								<el-input
									v-model="searchForm.id"
									placeholder="请输入告警ID"
									clearable
									size="small"
									style="width: 240px"
									@keyup.enter.native="searchListFn(true)"
									@clear="searchListFn(true)"
								/>
						</el-form-item>
            <el-form-item label="预警时间">
                <el-date-picker
                        v-model="dateRange"
                        size="small"
                        style="width: 340px"
                        type="datetimerange"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :default-time="['00:00:00', '23:59:59']"
                        @change="searchListFn(true)"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" v-has-permi="['alarm:alarm:list']"
                           @click="searchListFn(true)">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetSearchFn">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table height="580" border v-loading="loading" :data="alarmList">
            <el-table-column fixed label="告警地址" align="center" key="location" prop="location" fixed="left"/>
            <el-table-column  label="告警类型" width="140" align="center" key="alarmType" prop="alarmType">
                <template slot-scope="scope">
                    <span>{{ scope.row.alarmType == 157 ? '未牵狗绳识别' : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="告警图片" width="95" align="center" key="alarmSmallPic" prop="alarmSmallPic">
                <template slot-scope="scope">
                    <el-image
                            v-if="scope.row.alarmSmallPic"
                            style="width: 40px; height: 40px"
                            :src="scope.row.alarmSmallPic"
                            :preview-src-list="[scope.row.alarmBigPic]"
                    />
                </template>
            </el-table-column>
            <el-table-column label="告警视频" width="95" align="center" key="alarmVideo" prop="alarmVideo">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.alarmVideo" type="primary" @click="playVideoFn(scope.row)">播放</el-button>
                </template>
            </el-table-column>
            <el-table-column label="告警时间" width="190" align="center" key="alarmTime" prop="alarmTime"/>
            <el-table-column label="告警处理状态" width="120" align="center" key="status" prop="status">
                <template slot-scope="scope">
                    <span>{{ ['未处理', '持续跟进', '已处理'][scope.row.status] }}</span>
                </template>
            </el-table-column>
            <el-table-column label="告警处理结果" align="center" key="dealRemark" prop="dealRemark"/>
            <el-table-column label="告警处理时间" width="190" align="center" key="dealTime" prop="dealTime"/>
            <el-table-column
                    label="操作"
                    align="center"
                    width="100"
                    class-name="small-padding fixed-width"
										fixed="right"
            >
                <template slot-scope="scope" v-if="scope.row.status != 2">
                    <el-button
                            size="mini"
                            style="color: #409EFF"
                            @click="handleFn(scope.row)"
                            v-has-permi="['alarm:alarm:deal']"
                    >处理
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    @size-change="handleSizeChange"
                    :current-page="searchForm.pageIndex"
                    :page-size="searchForm.pageSize"
                    :page-sizes="[10, 20, 30, 50]"
                    :total="total"
                    @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
        <!-- 处理预警 -->
        <el-dialog title="处理" :visible.sync="isOpenDialog" width="600px" append-to-body>
            <el-form ref="dialogForm" :model="dialogForm" :rules="dialogRules" label-width="100px">
                <el-form-item label="处理状态" prop="status">
                    <el-radio-group v-model="dialogForm.status">
                        <el-radio label="1">持续跟进</el-radio>
                        <el-radio label="2">已处理</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="处理结果" prop="dealRemark">
                    <el-input v-model="dialogForm.dealRemark" type="textarea" placeholder="请输入内容"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFormFn">确 定</el-button>
                <el-button @click="isOpenDialog = false">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog
                title="播放视频"
                :visible.sync="isPlayVideoFlag"
                width="50%"
                append-to-body
                destroy-on-close
        >
            <video :src="videoUrl" controls style="width: 100%;max-height: 50vh"></video>
        </el-dialog>
    </div>
</template>

<script>
    import deptRequest from "@/api/system/dept";
    import alarmRequest from "@/api/alarm";
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        name: "behaviorAlarm",
        data() {
            return {
                deptName: "", // 属地管理员
                dateRange: [],
                searchForm: {
                    deptId: undefined,
										location: undefined,
										id: undefined,
                    alarmType: undefined,
                    pageIndex: 1,
                    pageSize: 10
                },
                loading: false,
                alarmList: [],
                total: 0,

                isOpenDialog: false,
                dialogForm: {
                    id: "", // 告警id
                    status: "", // 处理状态：1 持续跟进，2 已处理
                    dealRemark: "", // 处理备注,
                },
                dialogRules: {
                    status: [{required: true, message: "处理状态不能为空", trigger: "change"}]
                },

                isPlayVideoFlag: false,
                videoUrl: '',

                // 部门树选项
                deptOptions: undefined,
            }
        },
        components: {Treeselect},
        mounted() {
            this.searchListFn();
            this.getTreeselect();
        },
        watch: {
            // 根据名称筛选部门树
            deptName(val) {
                this.$refs.tree.filter(val);
            }
        },
        methods: {
            async searchListFn(flag = false) {
                if (flag) this.searchForm.pageIndex = 1;
                try {
                    this.loading = true
                    // console.log("搜索内容：", this.addDateRange(this.searchForm, this.dateRange))
                    const res = await alarmRequest.listPageService(this.addDateRange(this.searchForm, this.dateRange))
                    this.alarmList = res.data.list || []
                    this.total = Number(res.data.total || 0)
                } finally {
                    this.loading = false
                }
            },
            handleSizeChange(val) {
                this.searchForm.pageIndex = 1;
                this.searchForm.pageSize = val;
                this.searchListFn();
            },
            handleCurrentChange(val) {
                this.searchForm.pageIndex = val;
                this.searchListFn();
            },
            resetSearchFn() {
                this.searchForm = {
										deptId: undefined,
										location: undefined,
										id: undefined,
										alarmType: undefined,
										pageIndex: 1,
										pageSize: 15
                }
                this.dateRange = []
                this.deptName = ""
                this.searchListFn()
            },

            handleFn(data) {
                this.$refs.dialogForm && this.$refs.dialogForm.resetFields()
                this.dialogForm.id = data.id;
                this.dialogForm.status = data.status;
                this.dialogForm.dealRemark = data.dealRemark || "";
                this.isOpenDialog = true;
            },
            submitFormFn() {
                this.$refs.dialogForm.validate(async valid => {
                    if (!valid) return;
                    await alarmRequest.dealService(this.dialogForm)
                    this.$message.success("处理成功")
                    this.isOpenDialog = false
                    await this.searchListFn()
                })
            },

            /** 查询部门下拉树结构 */
            getTreeselect() {
                deptRequest.deptTreeselect({}).then(response => {
                    this.deptOptions = response.data.list;
                });
            },
            /** 转换部门数据结构 */
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.name,
                    children: node.children
                };
            },

            playVideoFn(data) {
                if (!data.alarmVideo) return
                this.videoUrl = data.alarmVideo
                this.isPlayVideoFlag = true;
            }
        }
    }
</script>

<style lang="scss" scoped>
    ::v-deep .el-radio__inner {
        border: 1px solid #999;
    }
    ::v-deep  .el-table thead {
        color: black;
    }
</style>
